<template>
	<view>
		
		<!-- #ifdef APP-PLUS || MP-WEIXIN -->
		<u-navbar title="设置提现密码" back-icon-color="#000" :is-back="true" title-color="#000" :background="{ background:'#ffffff'}" :border-bottom="true"></u-navbar>
		<!-- #endif -->

		<view class="setmima">
			<image :src="BestImgUrl+'Frame2006.png'" mode="widthFix"></image>
			<view class="title_1">输入短信验证码</view>
			<view class="title_2">我们已发送短信验证码到您的手机号</view>
			<view class="title_3">{{myphone}}</view>
		</view>

		<view class="verifyCode">
			<xt-verify-code cursorColor="#F09536" boxActiveColor="#F09536" boxNormalColor="#D9D9D9" v-model="verifyCode" @confirm="confirm"></xt-verify-code>
		</view>
		<view class="houfansong">
			<text @tap="getCode">{{tips}}</text>
		</view>


		<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-verification-code>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				BestImgUrl: app.globalData.imgurlBwc,
				myphone: '',
				verifyCode: '',
				tips: '',
				seconds: 60,
				
				Passwordone:'',
				Passwordtwo:''
			}
		},
		onLoad(ops) {
			this.Passwordone = ops.Passwordone
			this.Passwordtwo = ops.Passwordtwo
			
			let phone = uni.getStorageSync('userinfo').username
			let myphone = phone.substring(0, 3) + '****' + phone.substring(7);
			this.myphone = myphone
			
		},
		onReady() {
			
		},
		methods: {
			confirm(e) {
				let that = this
				console.log(e)
				uni.showLoading({
					title: '正在设置中...'
				})
				setTimeout(() => {
					that.$api.preserveTixianCode({
						code: that.verifyCode,
						cash_password: that.Passwordone,
						re_cash_password: that.Passwordtwo
					}).then(res => {
						uni.hideLoading()
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000
						});
						setTimeout(() => {
							uni.navigateBack({
								delta: 3
							})
						}, 2000)
					}).catch(err => {
						uni.hideLoading()
						uni.showToast({
							title: err.data.msg,
							icon: 'none',
							duration: 2000
						});
					})
				}, 2000)
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				let that = this
				if (that.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					//uni.showLoading({
					//	title: '正在获取验证码'
					//})
					setTimeout(() => {
						that.$api.GetTixianCode({

						}).then(res => {
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							that.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							that.$refs.uCode.start();
						}).catch(err => {
							uni.hideLoading();
							uni.showToast({
								title: err.data.msg,
								icon: 'none',
								duration: 2000
							});
						})
					}, 2000);
				} else {
					that.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				//this.$u.toast('倒计时结束');
			},
			start() {
				//this.$u.toast('倒计时开始');
			},
		}
	}
</script>

<style lang="scss">
	.verifyCode {
		width: 80%;
		margin: 46rpx auto 40rpx;
	}

	.houfansong {
		text-align: center;
		color: #F09536;
	}

	.setmima {
		margin-top: 136rpx;
		text-align: center;

		image {
			width: 168rpx;
		}

		.title_1 {
			font-size: 36rpx;
			margin-top: 40rpx;
		}

		.title_2 {
			font-size: 26rpx;
			margin-top: 32rpx;
			color: #999999;
		}

		.title_3 {
			font-size: 36rpx;
			margin-top: 36rpx;
		}
	}
</style>